<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/pulltorefresh.css" />
		<style type="text/css">
			.mui-content {
				height: 100%;
				padding: 44px 0px 0px 0px;
				background-color: #eaeaea;
			}

			.msg-item {
				padding: 8px;
				clear: both;
			}

			.msg-item .mui-item-clear {
				clear: both;
			}

			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				max-width: 75%;
				min-width: 35px;
				float: left;
			}

			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}

			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 10px;
				height: 10px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}

			.msg-item-self .msg-user,
			.msg-item-self .msg-content {
				float: right;
			}

			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}

			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #4CD964;
				color: #fff;
				border-color: #2AC845;
			}

			.msg-item .msg-user-img {
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				color: #ddd;
			}

			.msg-item .msg-self-img {
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: right;
				color: #ddd;
			}

			.footer {
				border-top: solid 0.5px #bbb;
				overflow: hidden;
				background-color: #fafafa;
			}

			.footer-left {
				padding-left: 10px;
				vertical-align: middle;
				line-height: 100%;
				margin: 7px 7px;
				border-radius: 5px;
				border: solid #EAEAEA 1px;
			}

			.footer-right {
				height: 34px;
				margin-top: 7px;
				text-align: left;
				vertical-align: middle;
				line-height: 100%;
				padding: 0 10px;
			}

			.emoticon_wrapper {
				display: none;
				height: 240px;
				overflow-y: scroll;
				border-top: solid 0.5px #bbb;
			}
		</style>
	</head>

	<body style="background-color: #EAEAEA;">
		<!-- 头部标题 -->
		<header class="mui-bar mui-bar-nav" style="background-color: #EAEAEA; box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #666666;"></a>
			<h1 class="mui-title" id="title"></h1>
		</header>

		<div id="mui-content" class="mui-content" style="display: flex; flex-direction: column;">
			<!-- 历史消息展示区 -->
			<div id="wrapper" class="mui-scroll-wrapper" style="flex: auto; position: relative;">
				<div class="mui-scroll" id="container">
					<div id="msg-list"></div>
				</div>
			</div>

			<!-- 消息编辑与发送区 -->
			<div id="foot" class="footer" style="height: 50px; display: flex; flex-direction: row;">
				<div id="msg-input" contenteditable="true" style="flex: auto;" class="footer-left"
					style="background-color: white; font-size: 16px; height: 32px; line-height: 32px;">
				</div>
				<div class="footer-right">
					<button type="button" id="add-emoji" class="mui-btn-gray">+</button>
					<button type="button" id="send-message" class="mui-btn-gray" disabled="disabled">发送</button>
				</div>
			</div>

			<!-- 表情展示区 -->
			<div id="emoticon_wrapper" class="emoticon_wrapper">
			</div>
		</div>

		<script src="js/mui.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/sqlite.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var pullToRefresh = null;
			mui.init();
			var originalHeight = document.documentElement.clientHeight;
			document.getElementById('mui-content').style.height = originalHeight + 'px';

			var keyboard_popup = false,
				need_popup_emoji = false;
			var ele_wrapper = document.getElementById('wrapper');
			var ele_footer = document.getElementById('foot');
			var ele_emoticon_wrapper = document.getElementById('emoticon_wrapper');
			var ele_msg_input = document.getElementById("msg-input");
			var ele_send_message = document.getElementById("send-message");
			var ele_msg_list = document.getElementById("msg-list");
			var ele_title = document.getElementById('title');
			var ele_add_emoji = document.getElementById('add-emoji');

			// 初始化表情数据
			for (var i = 0; i < 50; i++) {
				ele_emoticon_wrapper.innerHTML +=
					"<div style='float: left; width: 12.5%; margin: 5px 0 0 0; text-align: center;'>" +
					"<img src='imgs/qqemoji/" + i + ".png' class='emoji' width='30' height='30'>" +
					"</div>";
			}

			// 绑定事件回调
			ele_add_emoji.addEventListener("tap", () => {
				if (!keyboard_popup) {
					if (ele_emoticon_wrapper.style.display == 'block') {
						ele_emoticon_wrapper.style.display = 'none';
					} else {
						ele_emoticon_wrapper.style.display = 'block';
					}
				} else {
					need_popup_emoji = true;
				}
			});

			ele_wrapper.addEventListener('tap', () => {
				if (ele_emoticon_wrapper.style.display == 'block') {
					ele_emoticon_wrapper.style.display = 'none';
				}
			});

			ele_msg_input.addEventListener("input",
				() => enableSendMessage(this.innerHTML != ""));

			mui("#emoticon_wrapper").on('tap', '.emoji', function(e) {
				ele_msg_input.innerHTML += "<img src='" + this.src +
					"' width='20' height='20' style='vertical-align: text-bottom;'>";
				enableSendMessage(true);
			});

			var currentPageIndex = 1;
			mui.ready(function() {
				mui('#wrapper').scroll({
					indicators: true,
				});

				pullToRefresh = mui('#container').pullToRefresh({
					down: {
						callback: function() {
							loadMessage(++currentPageIndex)
							this.endPullDownToRefresh();
						}
					}
				});
			});

			function msgListScrollToBottom() {
				mui('#wrapper').scroll().scrollToBottom(0);
			}

			function enableSendMessage(isEnable) {
				if (isEnable) {
					ele_send_message.setAttribute("class", "mui-btn-green");
					ele_send_message.disabled = "";
				} else {
					ele_send_message.setAttribute("class", "mui-btn-gray");
					ele_send_message.disabled = "disabled";
				}
			}

			window.onresize = function() {
				setTimeout("msgListScrollToBottom()", 10);

				if (need_popup_emoji) {
					ele_emoticon_wrapper.style.display = 'block';
					need_popup_emoji = false;
				} else {
					ele_emoticon_wrapper.style.display = 'none';
				}
				keyboard_popup = !keyboard_popup;
			}

			var me = null;
			var friendUserId = null;
			mui.plusReady(function() {
				var currentWebView = plus.webview.currentWebview();
				friendUserId = currentWebView.friendUserId;
				me = app.getGlobalUserInfo();
				var friend = app.getFriendItem(friendUserId);
				ele_title.innerHTML = friend.name;

				mui('#msg-list').on('tap', '.msg-self-img', function() {
					mui.openWindow({
						url: 'user_detail.html',
						extras: {
							u: me
						}
					});
				});

				mui('#msg-list').on('tap', '.msg-user-img', function() {
					mui.openWindow({
						url: 'user_detail.html',
						extras: {
							u: friend
						}
					});
				});

				loadMessage(currentPageIndex);
				setTimeout("msgListScrollToBottom()", 100);

				var chatListWebView = plus.webview.getWebviewById("chat.html");
				ele_send_message.addEventListener("click", function() {
					var msg = ele_msg_input.innerHTML;
					ele_msg_input.innerHTML = "";
					ele_send_message.setAttribute("class", "mui-btn-gray");
					ele_send_message.disabled = "disabled";

					var chatMsg = new app.ChatMsg(me.id, friendUserId, msg, null);
					var dataContent = new app.DataContent(app.CHAT, chatMsg, null);

					appendSendMessage(msg);
					SQLITE.insertChatMsg(me.id, friendUserId, msg);
					app.saveChatSnapshot(me.id, friendUserId, msg, true);

					chatListWebView.evalJS("CHAT.send('" + JSON.stringify(dataContent) + "')");
				});

				setTimeout(() => {
					for (let wv of plus.webview.all()) {
						if (wv.id === 'user_detail.html') {
							plus.webview.hide(wv);
							plus.webview.close(wv);
						}
					}
				}, 1000)

			});

			function loadMessage(pageIndex) {
				var data = SQLITE.selectChatMsg(me.id, friendUserId, pageIndex, 15, (data) => {
					for (var i = 0; i < data.length; i++) {
						if (data[i].from == me.id) {
							appendSendMessage(data[i].msg, true);
						} else {
							appendRecvMessage(data[i].msg, true);
						}
					}
				});
			}

			function appendSendMessage(msg, load) {
				var htmlContent =
					'<div class="msg-item msg-item-self">' +
					'<img class="msg-self-img" src=' + app.getFaceImage(me.id) + ' alt=""/>' +
					'<div class="msg-content">' +
					'<div class="msg-content-inner">' +
					msg +
					'</div>' +
					'<div class="msg-content-arrow"></div>' +
					'</div>' +
					'<div class="mui-item-clear"></div>' +
					'</div>';
				if (load) {
					ele_msg_list.insertAdjacentHTML("afterbegin", htmlContent);
				} else {
					ele_msg_list.insertAdjacentHTML("beforeend", htmlContent);
				}
			}

			function appendRecvMessage(msg, load) {
				var htmlContent =
					'<div class="msg-item msg-item-user">' +
					'<img class="msg-user-img" src=' + app.getFaceImage(friendUserId) + ' alt="" />' +
					'<div class="msg-content">' +
					'<div class="msg-content-inner">' +
					msg +
					'</div>' +
					'<div class="msg-content-arrow"></div>' +
					'</div>' +
					'<div class="mui-item-clear"></div>' +
					'</div>';
				if (load) {
					ele_msg_list.insertAdjacentHTML("afterbegin", htmlContent);
				} else {
					ele_msg_list.insertAdjacentHTML("beforeend", htmlContent);
				}
			}
		</script>
	</body>
</html>
